<template>
  <div class="home-pannel">
  <!-- 头部 -->
      <div class="header-box">
        <div class="left">
          <h1>{{title}}</h1>
          <span>{{subTitle}}</span>
        </div>
        <div class="right">
          <!-- 查看全部===写成公共组件 -->
          <slot name="rightMore" />
        </div>
      </div>

      <!-- 主体 -->
      <div class="main-box">
       <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
  props:{
    title:{
      type:String,
      default:''
    },
    subTitle:{
      type:String,
      default:''
    }
  },
  setup () {
    

    return {}
  }
}
</script>

<style lang="less" scoped>
.home-pannel{
  .header-box{
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    .left{
      display:flex;
      align-items:flex-end;
      h1{
        margin:0;
        font-size:30px;

      }
      span{
        margin-left:10px;
      }

    }
    .right{

    }
  }
  /deep/.main-box{
    ul{
      display:flex;
      justify-content:space-between;
      li{
        width: 306px;
        height: 406px;
        background:#f0f9f4;
        // &:hover{
        //   box-shadow:5px  5px  2px 2px red;
        // }
        img{
          width:100%;
        }
        h2{
           text-align:center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding:0  20px;
            font-weight:500;
        }
        p{
          text-align:center;
          color:red;
          font-size:16px;
          font-weight:500;
        }
      }
    }
  }

}
</style>